<template>
	<gracePage :isSwitchPage="true" :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody" class="grace-body">
			<graceNavBar
				class="nav-bar"
				:items="tabTexts"
				activeLineRadius="20rpx"
				activeDirection="center"
				textAlign="center"
				color="#969696"
				lineHeight="30rpx"
				activeLineWidth="60rpx"
				activeLineHeight="10rpx"
				activeLineBg="#FEDE33"
				:currentIndex="currentIndex"
				@change="navChange"
			></graceNavBar>
			<swiper :style="{ height: mainHeight + 'px' }" :current="currentIndex" @change="swiperChange">
				<swiper-item v-for="(news, newsIndex) in newsList" :key="newsIndex">
					<scroll-view scroll-y :style="{ height: mainHeight + 'px' }" @scrolltolower="scrollend">
						<view class="empty-view grace-flex-center grace-flex-vcenter grace-animate fadeIn" v-if="news.list.length === 0">
							<image class="empty-img" mode="widthFix" src="/static/image/nothing.png"></image>
						</view>
						<block v-for="(item, index) in news.list" :key="index">
							<index-list :item="item"></index-list>
						</block>
						<graceLoading :loadingType="news.loadingType"></graceLoading>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</gracePage>
</template>

<script>
import IndexList from '../../components/index-list/index-list';
var graceJS = require('@/Grace.JS/grace.js');
export default {
	components: {
		IndexList
	},
	data() {
		return {
			currentIndex: 0,
			mainHeight: 500,
			tabs: [],
			newsList: []
		};
	},
	computed:{
		tabTexts(){
			return this.tabs.map(t=>t.classname)
		}
	},
	onReady() {
		this.mainHeight = graceJS.system().windowHeight - uni.upx2px(80);
	},
	onLoad() {
		//加载分类信息 初始化数据
		this.getCate();
	},
	onNavigationBarSearchInputClicked() {
		graceJS.navigate('../search/search');
	},
	onNavigationBarButtonTap(e) {
		if (e.index == 1) {
			this.navigateTo({
				url:'../publish/publish'
			});
		}
	},
	watch: {
		currentIndex(nVal, oldVal) {
			// if((this.newslist[this.currentIndex].loadingType != 2 || this.newslist[this.currentIndex].loadingType != 4) && this.newslist[this.currentIndex].page < 2){ this.loadMoreFunc(); }
		}
	},
	methods: {
		navChange(index) {
			this.currentIndex = index;
		},
		swiperChange(e) {
			let index = e.detail.current;
			this.currentIndex = index;
		},
		getCate() {
			this.$H.get('postclass',{},{},
				(res)=>{
					this.tabs = res.data.list
					let arr = [];
					for (let i = 0; i < this.tabs.length; i++) {
						arr.push({
							loadingType: 3,
							list: [],
							page: 1,
							firstLoad: false,
						});
					}
					this.newsList = arr;
					if (this.tabs.length > 0) {
						
						this.getList();
					}
				}
			);
			
		},
		scrollend() {
			// 判断加载状态避免多次滚动时有加载尚未完成
			if (this.newsList[this.currentIndex].loadingType === 2 || this.newsList[this.currentIndex].loadingType === 4) {
				return false;
			}
			this.loadMore();
		},
		getList() {
			let index = this.currentIndex;
			let id = this.tabs[index].id;
			let page = this.newsList[index].page;
			let isRefresh = page === 1;
			let url = 'postclass/' + id + '/post/' + page;
			this.$H.get(url,{},{},(res)=>{
				console.log(url)
				console.log(res)
				let list = res.data.list
				this.newsList[index].list = isRefresh ? list : [...this.newsList[index].list, ...list];
				this.newsList[index].loadingType = list.length < 10 ? 2 : 0;
				this.newsList[index].page++
				if (isRefresh) {
					this.newsList[index].firstLoad = true;
				}
			});
		},
		//加载更多时执行的函数
		loadMore() {
			let item = this.newsList[this.currentIndex]
			item.loadingType = 1
			//追加数据
			this.getList()
		}
	}
};
</script>

<style lang="stylus">
.nav-bar
	line-height 80rpx
	height 80rpx
.empty-view
	background #FFFFFF
	position absolute
	top 0
	bottom 0
	left 0
	right 0
	.empty-img
		width 40%
</style>
